<template>
  <el-row class="classification">
    <el-row>
      <el-button type="primary" @click="addClass">
        添加板块
      </el-button>
    </el-row>
    <el-row class="card">
      <template v-for="(item, index) in classification">
        <classCard
          :key="index"
          :index="index"
          :card="item"
          :all-class="classification"
          @recover="recover"
          @delete="deleteCard"
          @add="addMap"
          @change="change"
          @moveMap="moveMap"
          @deleteMap="deleteMap"
        />
      </template>
    </el-row>
  </el-row>
</template>

<script>
import classCard from '@/components/classCard'
import { getClass, deleteClass, postClass } from '@/api/public'
export default {
  name: 'Classification',
  components: { classCard },
  data() {
    return {
      classification: []
    }
  },
  async created() {
    const result = await getClass()
    if (result.code === 1) {
      this.classification = result.data
      this.sort()
    }
  },
  methods: {
    sort() {
      this.classification.sort((item1, item2) => {
        if (item1.delete && item2.delete) {
          return 0
        } else if (item1.delete) {
          return 1
        } else {
          return -1
        }
      })
    },
    change(index1, index2) {
      const item1 = this.classification[index1]
      const item2 = this.classification[index2]
      this.classification.splice(index1, 1, item2)
      this.classification.splice(index2, 1, item1)
      this.$message({
        type: 'success',
        message: '移动板块成功'
      })
    },
    async deleteCard(index) {
      if (this.classification[index].delete) {
        this.classification.splice(index, 1)
        this.$message({
          type: 'success',
          message: '永久删除板块成功'
        })
        this.sort()
      } else {
        const result = await deleteClass({
          id: this.classification[index].id,
          op: -1
        })
        if (result.code === 0) {
          this.$message({
            type: 'success',
            message: '删除板块成功'
          })
          this.classification[index].delete = true
          this.sort()
        } else {
          this.$message({
            type: 'error',
            message: result.msg
          })
        }
      }
    },
    async recover(index) {
      const result = await deleteClass({
        id: this.classification[index].id,
        op: 1
      })
      if (result.code === 0) {
        this.$message({
          type: 'success',
          message: '恢复板块成功'
        })
        this.classification[index].delete = false
        this.sort()
      }
    },
    async addMap(index, value) {
      const id = 0
      const isdelete = false
      const result = await postClass({
        op: -this.classification[index].id,
        name: value
      })
      if (result.code === 0) {
        this.classification[index].map.push({
          id,
          name: value,
          delete: isdelete
        })
        this.$message({
          type: 'success',
          message: '成功添加分类' + value
        })
      }
    },
    async deleteMap(classIndex, mapIndex) {
      const result = await deleteClass({
        id: this.classification[classIndex].map[mapIndex].id,
        op: -2
      })
      if (result.code === 0) {
        this.$message({
          type: 'success',
          message: '删除分类成功'
        })
        this.classification[classIndex].map.splice(mapIndex, 1)
      }
    },
    moveMap(index, index1, index2) {
      const map = this.classification[index].map
      const item1 = map[index1]
      const item2 = map[index2]
      map.splice(index1, 1, item2)
      map.splice(index2, 1, item1)
    },
    addClass() {
      this.$prompt('请输入新增的板块名', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(async ({ value }) => {
          const result = await postClass({
            op: 1,
            name: value
          })
          const item = {
            id: 0,
            name: value,
            delete: false,
            map: []
          }
          this.classification.push(item)
          this.sort()
          if (result.code === 0) {
            this.$message({
              type: 'success',
              message: '新增板块成功 '
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  display: flex;
  flex-wrap: wrap;
}
.classification {
  padding: 20px 40px;
}
</style>
